<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/params/205/nice vue demo">演示restful方式传参</router-link> |
      <router-link to="/data-binding">演示数据绑定</router-link>
      | <router-link to="/directives">演示指令</router-link>
      | <router-link to="/lifecycle">演示生命周期</router-link>
      | <router-link to="/computed-attribute">演示计算属性</router-link>
      | <router-link to="/style-bind">演示样式绑定</router-link>
      | <router-link to="/array-update">演示数组更新</router-link>
      | <router-link to="/event">演示事件</router-link>
      | <router-link to="/v-model">演示v-model</router-link>
      | <router-link to="/my-component">演示组件</router-link>
      | <router-link to="/async-component">演示异步加载组件</router-link>
      | <router-link to="/bus">演示Bus消息总线</router-link>
      | <router-link to="/ref-event">演示父子链设置消息</router-link>
      | <router-link to="/slot">演示slot</router-link>
      | <router-link to="/render">演示Render</router-link>
      | <router-link to="/render-component">演示RenderComponent</router-link>
      | <router-link to="/vuex">演示Vuex</router-link>
      | <router-link to="/axios">演示Axios</router-link>
      | <router-link to="/axios-await">演示同步Axios</router-link>
      | <router-link to="/mockjs">演示同步mockjs</router-link>

    </div>
    <!-- 路由到的页面会显示是下面这个标签内 -->
    <router-view/>

  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
